GitHub OAuth

本文将介绍如何基于 OAuth 协议让自己的网络应用集成第三方 GitHub 授权登录

前置内容

首先登录（如果没有账号那就注册一个）GitHub

  1. 进入设置（Settings）
  2. 点击 Developer Settings
  3. 点击 OAuth Apps
  4. 然后创建应用（New OAuth Apps）

总体流程

sequenceDiagram autonumber
用户->>WEB应用: 使用GitHub登录
WEB应用->>GitHub: 向GitHub请求权限
GitHub->>用户: 询问是否同意授权
用户->>GitHub: 同意授权
GitHub->>WEB应用: 携带授权码回调地址
WEB应用->>GitHub: 使用授权码获取access_token
GitHub->>WEB应用: 校验客户端ID和授权码成功返回access_token
WEB应用->>GitHub: 携带access_token向GitHub API发送请求

创建应用

image-20241103193919752

按照上面表示填写数据信息，尤其是回调地址那一块尤其重要，因为在后续访问时填写参数和回调地址对不上的话会出问题的

创建客户端ID和密钥

image-20241103194707994

复制一下客户端ID然后再生成一下看客户点密钥（这个记得保存因为他只明文显示一次）

代码

这里只展示一下最简单的流程信息，代码会非常简陋

版本情况：

  • Java:17
  • SpringBoot:3.0.5

代码 Demo

案例地址：github-login_demo

配置文件

1
2
3
4
5
6
7
8
demo:
  github:
    # 客户端ID
    clientId:
    # 客户端密钥
    clientSecret:
    # 回调地址（和GitHub写的回调要保持一致）
    redirectUri:

克隆下来上面的代码之后把配置信息填一下然后把代码跑起来

使用

这点里面的代码不涉及任何前端，代码跑起来之后直接在游览器访问：http://localhost:8080。然后后端就会拼接并重定向到请求授权链接，会出现下图

image-20241103215924263

点击绿色的按钮表示同意授权，GitHub就会重定向到之前填写的授权链接并携带上了授权码。像是以下这样：

1
http://127.0.0.1:8080/redirect?code=1e648753e8051321ca77

此时后端回调地址被调用并接收到 code 码，就会根据 code 码去请求 access_token 令牌。像是以下这样：

1
access_token=a4fdc43gc2fs43cb77v3cd3y27f9cfd6614d29c&scope=&token_type=bearer

然后对这个令牌进行解析，获取到 access_token 后面的字符串，获取到后会携带令牌向 GitHub API 发送请求

至此大公大功告成！